﻿<!doctype html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no">

  <title>Core Drag Drop</title>

  <script src="../platform/platform.js"></script>

  <link rel="import" href="core-drag-drop.html">

  <style>

    html {
      font-family: 'Helvetica Neue', 'Roboto', 'Arial', sans-serif;
    }

    body {
      height: 100vh;
      margin: 0;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
    }

    .box {
      display: inline-block;
      width: 100px;
      height: 100px;
      margin: 16px;
    }

    .dropped {
      position: absolute;
      border: 1px solid black;
      width: 5px;
      height: 5px;
    }

  </style>

</head>
<body unresolved>

  <div style="border: 1px dotted silver;">

    <core-drag-drop></core-drag-drop>

    <div class="box" style="background-color: lightblue;" draggable="false"></div>

    <div class="box" style="background-color: orange;" draggable="false"></div>

    <div class="box" style="background-color: lightgreen;" draggable="false"></div>

    <div id="hello">Hello World</div>

  </div>

  <br><br><br><br><br><br>

  <div id="drop" class="box" style="border: 3px solid silver; position: relative; width: 300px; height: 300px;" draggable="false"></div>

  <script>
    addEventListener('drag-start', function(e) {
      var dragInfo = e.detail;
      // flaw #2: e vs dragInfo.event
      var color = dragInfo.event.target.style.backgroundColor;
      dragInfo.avatar.style.cssText = 'border: 3px solid ' + color + '; width: 32px; height: 32px; border-radius: 32px; background-color: whitesmoke';
      e.detail.avatar.appendChild(document.querySelector('#hello'));
      dragInfo.drag = function() {};
      dragInfo.drop = drop;
    });
    //
    function drop(dragInfo) {
      var color = dragInfo.avatar.style.borderColor;
      var dropTarget = dragInfo.event.relatedTarget;
      if (color && dropTarget.id === 'drop') {
        var f = dragInfo.framed;
        var d = document.createElement('div');
        d.className = 'dropped';
        d.style.left = f.x - 4 + 'px';
        d.style.top = f.y - 4 + 'px';
        d.style.backgroundColor = color;
        dropTarget.appendChild(d);
        dropTarget.style.backgroundColor = color;
      }
    }
  </script>

</body>
</html>
